<template>
  <screenDialog :dialogVisible="dialogVisible" title="出图" @close="emits('changeFlag')">
    <div class="box">
      <darkInput v-model="formdata.title" placeholder="请输入标题" title="标题" />
      <darkInput v-model="formdata.unit" placeholder="请输入单位" title="单位" />
      <el-button type="primary"  @click="captureScreen" style="height: 35px"> 出图 </el-button>
    </div>
  </screenDialog>
</template>  
    
  <script setup>
import { ref, defineProps, defineEmits, watch, reactive } from 'vue'
import darkInput from '../../../../components/darkInput.vue'
import screenDialog from '../../../../components/screenDialog.vue'
import { ElMessage } from 'element-plus'

// eslint-disable-next-line vue/require-prop-types
const props = defineProps(['dialogVisible'])
const emits = defineEmits(['changeFlag'])

// const dialogVisible = ref(true);
const canvasData = ref(null)

const formdata = reactive({
  title: '',
  unit: ''
})
const captureScreen = async () => {
  if (formdata.title == '') {
    ElMessage({
      message: '请输入标题',
      type: 'warning'
    })
    return
  }
  if (formdata.unit == '') {
    ElMessage({
      message: '请输入单位',
      type: 'warning'
    })
    return
  }

  // 假设 map 是你的 OpenLayers 地图实例
  let originalCanvas = viewer.scene.canvas //viewer.scene.canvas;
  let originalContext = originalCanvas.getContext('2d')

  let originalWidth = originalCanvas.width
  let originalHeight = originalCanvas.height

  // originalCanvas = await map3d.getBase64();
  console.log(originalCanvas)

  /// 设置画布留白和边框参数
  let topPadding = 50
  let leftPadding = 20
  let rightPadding = 20
  let bottomPadding = 30
  let outerBorderWidth = 2
  let innerBorderWidth = 0 // 内边框宽度（如果需要内边框有颜色或样式，可以设置为非零值）
  let innerPadding = 10 // 内边框与外边框之间的留白

  // 计算新画布的总高度和宽度
  let newCanvasWidth =
    originalWidth + leftPadding + rightPadding + 2 * (outerBorderWidth + innerPadding)
  let newCanvasHeight =
    originalHeight + topPadding + bottomPadding + 2 * (outerBorderWidth + innerPadding)

  // 创建一个新画布
  let newCanvas = document.createElement('canvas')
  newCanvas.width = newCanvasWidth
  newCanvas.height = newCanvasHeight
  let newContext = newCanvas.getContext('2d')

  // 用白色填充新画布的整个背景
  newContext.fillStyle = 'white'
  newContext.fillRect(0, 0, newCanvasWidth, newCanvasHeight)

  // 绘制外边框
  newContext.strokeStyle = 'black'
  newContext.lineWidth = outerBorderWidth
  newContext.strokeRect(
    outerBorderWidth / 2 + leftPadding,
    outerBorderWidth / 2 + topPadding,
    newCanvasWidth - outerBorderWidth - leftPadding * 2,
    newCanvasHeight - outerBorderWidth - topPadding - bottomPadding
  )

  // 绘制内边框（如果需要的话，可以调整颜色和样式）
  newContext.strokeStyle = 'black' // 假设内边框为灰色
  newContext.lineWidth = innerBorderWidth
  newContext.strokeRect(
    outerBorderWidth / 2 + leftPadding + 10,
    outerBorderWidth / 2 + topPadding + 10,
    newCanvasWidth - outerBorderWidth - leftPadding * 2 - 20,
    newCanvasHeight - outerBorderWidth - topPadding - bottomPadding - 20
  )

  // 计算内边框内部的绘制区域
  let innerCanvasX = outerBorderWidth + innerPadding + leftPadding
  let innerCanvasY = outerBorderWidth + innerPadding + topPadding
  let innerCanvasWidth = newCanvasWidth - 2 * (outerBorderWidth + innerPadding)
  let innerCanvasHeight =
    newCanvasHeight - 2 * (outerBorderWidth + innerPadding) - topPadding - bottomPadding

  var base64Image = await map3d.getBase64()
  var img = new Image()
  img.src = base64Image
  img.onload = function () {
    newContext.drawImage(
      img,
      0,
      0,
      originalWidth,
      originalHeight,
      innerCanvasX,
      innerCanvasY,
      innerCanvasWidth - 40,
      innerCanvasHeight
    )
    // 设置字体和颜色
    newContext.font = '34px Arial'
    newContext.textAlign = 'center'
    newContext.fillStyle = 'black'
    // 计算文本绘制的y坐标（相对于外边框的顶部和底部）
    let titleY = outerBorderWidth + topPadding / 2 + 10 // 标题的y坐标（相对于外边框顶部）
    let authorY = newCanvasHeight - outerBorderWidth - bottomPadding / 2 + 10 // 作者文本的y坐标（相对于外边框底部，减去字体高度的一半进行垂直居中）
    let dateY = authorY // 日期文本的y坐标与作者文本相同
    let dateText = new Date().toLocaleString()
    let xTextStart = newCanvasWidth / 2 // 文本开始的x坐标（相对于外边框左侧）

    // 在新画布的上方添加标题
    let titleText = formdata.title
    newContext.fillText(titleText, xTextStart, titleY)

    // 在新画布的下方添加作者和时间
    newContext.font = '18px Arial'
    newContext.textAlign = 'left';
  let authorText = "制图单位: " + formdata.unit;  
  newContext.fillText(authorText, 40, authorY);  
  let dateX = newCanvasWidth - outerBorderWidth - rightPadding - newContext.measureText(dateText).width - 80; // 日期文本的x坐标（相对于外边框右侧，减去日期文本宽度和额外间距） 
    newContext.fillText('出图时间: ' + dateText, dateX, dateY)

    // 导出为图片
    let dataURL = newCanvas.toDataURL('image/png')
    let link = document.createElement('a')
    link.href = dataURL
    link.download = `${dateText}.png`
    link.click()

    ElMessage({
      message: '出图成功',
      type: 'success'
    })
    handleClose()
  }
}

const handleClose = () => {
  emits('changeFlag')
}
</script>

  <style scoped>
.shower-screen {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  padding-top: 10vh;
  background-color: #2c2f337a;
  height: 100vh;
  width: 100vw;
  z-index: 2000;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px;
  height: 100%;
}
.el-input {
  margin-bottom: 10px;
}
</style>